情境

當團隊的設計師不在，你沒有 Figma 或 Zeplin 等方便的工具，只有一張 設計圖.png，要如何取得設計圖上的色碼，順利完成今天的開發任務呢？

這個專案用的色碼比較多，可以拿這個測試。
GitHub: https://github.com/dreambo4/NavigationDemo

工具介紹

今天要介紹的是 Mac 內建的「數位測色器」工具，可以幫助你尋找螢幕上顏色的顏色數值。

使用步驟

從 Mac 的啟動台，找到並開啟數位測色工具，再來只要把滑鼠移到想要查看顏色的地方，就能查看色碼。

但受限於圖片的解析度，測色計的結果只能說很非常接近，不一定能完全等於原始色碼。純色色塊越大較能取到精準的顏色。實測下，色彩空間選擇「以sRGB顯示」是最接近原始顏色的。

在 工具列 > 顯示方式 > 顯示數值，可以選用合適的色碼表示方式。

接下來實測，原始色碼是 #FFF59D，以測色計測出來的結果也是 #FFF59D！

鎖定光圈快捷鍵

參考自官方使用手冊

• 水平鎖定光圈: Command + X
• 垂直鎖定光圈: Command + Y
• 同時雙向鎖定光圈: Command + L

工具優缺

• 優點
  • 在沒有原始色碼的狀況下，取得最接近的色碼
• 缺點
  • 測色計結果受限於，圖片解析度、色塊大小
  • 若原始色碼帶有透明度，由測色計無法得知

參考資料

• 數位測色計使用手冊: https://support.apple.com/zh-tw/guide/digital-color-meter/welcome/mac

• 本文同步發佈在: https://dreambo4.github.io/2024/08/02/UI-03-UI%E8%A8%AD%E8%A8%88%E5%B8%AB%E4%B8%8D%E5%9C%A8%E5%AE%B6-%E7%94%A8%E6%BB%B4%E7%AE%A1%E5%B7%A5%E5%85%B7%E5%8F%96%E5%BE%97%E8%89%B2%E7%A2%BC/